<template>
  <div class="center-cmp">
    <div class="cc-header">
      <div class="header-box">
        <div class="timer">
          <p class="time">当前时刻：{{ timeNow }}</p>
          <p class="date">{{ dateNow + "  " + ampm + "  周" + day }}</p>
        </div>
        <div class="weather">
          <img
            class="weatherImg"
            :src="
              weatherInfo.list[0].tq1
                ? require(`../../../assets/image/${weatherInfo.list[0].tq1}.png`)
                : require('../../../assets/image/404.png')
            "
            alt="暂无"
          />
          <div class="weather-info">
            <p class="active">{{ weatherInfo.list[0].tq1 || '多云'}}</p>
            <p>
              {{ `${weatherInfo.list[0].qw2 || 20}-${weatherInfo.list[0].qw1 || 30}℃` }}
            </p>
            <p>{{ weatherInfo.cityName }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="divider">
      <dv-decoration-10 style="width: 100%; height: 5px" />
    </div> -->
    <div class="cc-main-container">
      <div class="decoration-top-right">
        <dv-decoration-12 style="width: 150px; height: 150px" />
      </div>
      <div class="decoration-bottom-right">
        <dv-decoration-1 style="width: 200px; height: 100px" />
      </div>
      <dv-flyline-chart-enhanced
        key="374812749821"
        ref="374812749821"
        :config="config"
        :dev="true"
        class="flyline-chart-enhanced"
      />
    </div>
  </div>
</template>

<script>
import { formatTime } from "../../../utils/utils";
import { getWeatherInfo } from "../../../Api/leadership/logistics";
export default {
  name: "CenterCmp",
  data() {
    return {
      weatherInfo: {
        list: [{tq1:'多云'}],
      },
      dateTimeStr: "",
      day: "",
      ampm: "",
      config: {
        points: [
          {
            name: "广东",
            coordinate: [0.61, 0.63],
            halo: {
              show: true,
            },
            icon: {
              src: require("../../../assets/image/mapCenterPoint.png"),
              width: 30,
              height: 30,
            },
          },
          {
            name: "新疆",
            coordinate: [0.24, 0.32],
          },
          {
            name: "西藏",
            coordinate: [0.22, 0.49],
          },
          {
            name: "青海",
            coordinate: [0.39, 0.43],
          },
          {
            name: "甘肃",
            coordinate: [0.49, 0.44],
          },
          {
            name: "内蒙古",
            coordinate: [0.58, 0.33],
          },
          {
            name: "黑龙江",
            coordinate: [0.80, 0.22],
          },
          {
            name: "吉林",
            coordinate: [0.78, 0.31],
          },
          {
            name: "辽宁",
            coordinate: [0.74, 0.33],
          },
          {
            name: "云南",
            coordinate: [0.47, 0.52],
          },
          {
            name: "贵州",
            coordinate: [0.53, 0.53],
          },
          {
            name: "四川",
            coordinate: [0.44, 0.63],
          },
          {
            name: "重庆",
            coordinate: [0.53, 0.58],
          },
          {
            name: "湖南",
            coordinate: [0.59, 0.56],
          },
          {
            name: "江西",
            coordinate: [0.64, 0.56],
          },
          {
            name: "福建",
            coordinate: [0.68, 0.58],
          },
          {
            name: "广西",
            coordinate: [0.55, 0.62],
          },
          {
            name: "台湾",
            coordinate: [0.72, 0.61],
          },
          {
            name: "陕西",
            coordinate: [0.55, 0.46],
          },
          {
            name: "山西",
            coordinate: [0.60, 0.41],
          },
          {
            name: "河北",
            coordinate: [0.64, 0.39],
          },
          {
            name: "山东",
            coordinate: [0.66, 0.43],
          },
          {
            name: "河南",
            coordinate: [0.61, 0.47],
          },
          {
            name: "安徽",
            coordinate: [0.66, 0.49],
          },
          {
            name: "江苏",
            coordinate: [0.71, 0.47],
          },
          {
            name: "湖北",
            coordinate: [0.60, 0.51],
          },
        ],
        lines: [
          {
            source: "新疆",
            target: "广东",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "西藏",
            target: "广东",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "青海",
            target: "广东",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "甘肃",
            target: "广东",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "内蒙古",
            target: "广东",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "黑龙江",
            target: "广东",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "吉林",
            target: "广东",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "辽宁",
            target: "广东",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "云南",
            target: "广东",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "贵州",
            target: "广东",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "四川",
            target: "广东",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "重庆",
            target: "广东",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "湖南",
            target: "广东",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "江西",
            target: "广东",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "福建",
            target: "广东",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "广西",
            target: "广东",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "台湾",
            target: "广东",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "陕西",
            target: "广东",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "山西",
            target: "广东",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "河北",
            target: "广东",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "山东",
            target: "广东",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "河南",
            target: "广东",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "安徽",
            target: "广东",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "江苏",
            target: "广东",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "湖北",
            target: "广东",
            color: "#fb7293",
            width: 2,
          },
        ],
        icon: {
          show: true,
          src: require("../../../assets/image/mapPoint.png"),
        },
        text: {
          show: true,
        },
        k: 0.5,
        bgImgSrc: require("../../../assets/image/map2.png"),
      },
    };
  },
  computed: {
    timeNow() {
      return this.dateTimeStr.slice(11);
    },
    dateNow() {
      return this.dateTimeStr.slice(0, 11);
    },
  },
  methods: {
    async setWeatherInfo() {
      const { data: res } = await getWeatherInfo();
      console.log("res: ", res);
      this.weatherInfo = res.data;
    },
    startGetNowTime() {
      setInterval(() => {
        let date = new Date();
        let hours = date.getHours(); //小时
        this.day = date.getDay(); //获取当前星期几
        this.ampm = hours < 12 ? "am" : "pm";
        this.dateTimeStr = formatTime(date);
      }, 1000);
    },
  },
  created() {
    this.startGetNowTime();
    // this.setWeatherInfo();
  },
  mounted() {
    // this.$refs["374812749821"].initWH();
    // this.$nextTick(function(){
      // console.log('this.$refs["374812749821"]: ', this.$refs["374812749821"]);
        // this.$refs["374812749821"].key = "12321412897"
    // })
  },
};
</script>

<style lang="scss" scoped>
.center-cmp {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  .cc-header {
    flex: 1;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    .header-box {
      flex: 1;
      display: flex;
      flex-direction: row;
      .timer {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .time {
          flex: 1;
          flex-grow: 0;
          font-size: 24px;
          display: flex;
          align-items: center;
        }
        .date {
          font-size: 14px;
          flex: 1;
          flex-grow: 0;
        }
      }
      .weather {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        .weatherImg {
          flex: 2;
          display: block;
          height: 80%;
          object-fit: contain;
        }
        .weather-info {
          flex: 1;
          font-size: 14px;
        }
      }
    }
    .decoration {
      flex: 1;
    }
  }
  .divider{
    height: 5px;
  }
  .cc-main-container {
    // width: 100%;
    padding-top: 20px;
    flex: 4;
    // height: 100%;
    position: relative;
    .decoration-top-right {
      position: absolute;
      top: 20px;
      left: 10px;
    }
    .decoration-bottom-right {
      position: absolute;
      bottom: 0;
      left: 10px;
    }
    .flyline-chart-enhanced {
      height: 100%;
      width: 100%;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
}
</style>
